<template>
  <el-input-number
    v-if="colType == ControlType.number.value"
    :value="vals"
    placeholder="默认值"
    @change="change"
  />
  <el-select
    v-else-if="colType == ControlType.switch.value"
    :value="vals"
    placeholder="请选择"
    :clearable="true"
    @change="change"
  >
    <el-option label="开" value="true" />
    <el-option label="关" value="false" />
  </el-select>
  <div
    v-else-if="
      colType == ControlType.date.value ||
        colType == ControlType.dateTime.value ||
        colType == ControlType.time.value
    "
  >
    <el-select
      v-model="chioseType"
      style="margin-bottom: 10px"
      placeholder="请选择"
      :clearable="true"
      @change="timeChange"
    >
      <el-option label="当前时间" value="[curTime]" />
      <el-option label="指定时间" value="customize" />
    </el-select>
    <el-date-picker
      v-if="colType == ControlType.date.value && chioseType == 'customize'"
      v-model="time"
      value-format="yyyy-MM-dd"
      placeholder="默认值"
      @change="change"
    />
    <el-date-picker
      v-else-if="
        colType == ControlType.dateTime.value && chioseType == 'customize'
      "
      v-model="time"
      type="datetime"
      value-format="yyyy-MM-dd HH:mm:ss"
      placeholder="默认值"
      @change="change"
    />
    <el-time-select
      v-else-if="colType == ControlType.time.value && chioseType == 'customize'"
      v-model="time"
      placeholder="默认值"
    />
  </div>
  <div v-else-if="colType == ControlType.company.value">
    <el-select
      v-model="chioseType"
      :clearable="true"
      placeholder="请选择公司"
      @change="comChange"
    >
      <el-option label="填写人所在公司" value="[comId]" />
      <el-option label="指定公司" value="customize" />
    </el-select>
    <companySelect
      v-if="chioseType == 'customize'"
      v-model="companyId"
      style="margin-top: 10px"
      @change="comChange"
    />
  </div>
  <div v-else-if="colType == ControlType.dept.value">
    <el-select
      v-model="chioseType"
      :clearable="true"
      placeholder="请选择单位/部门"
      @change="deptChange"
    >
      <el-option label="填写人所在部门" value="[deptId]" />
      <el-option label="填写人所在单位" value="[unitId]" />
      <el-option label="指定部门" value="customize" />
    </el-select>
    <div v-if="chioseType == 'customize'" style="margin-top: 10px">
      <companySelect v-model="deptComId" />
      <deptSelect
        v-model="deptId"
        style="margin-top: 10px"
        :company-id="deptComId"
        @change="deptChange"
      />
    </div>
  </div>
  <el-select
    v-else-if="
      colType == ControlType.input.value || colType == ControlType.label.value
    "
    v-model="vals"
    placeholder="默认值"
    :filterable="true"
    :allow-create="true"
    :clearable="true"
    @change="change"
  >
    <el-option label="填写人名字" value="[empName]" />
    <el-option label="填写人当前岗位" value="[post]" />
    <el-option label="填写人所在公司" value="[company]" />
    <el-option label="填写人所在部门" value="[dept]" />
    <el-option label="填写人所在单位" value="[unit]" />
    <el-option label="填写人所在单位部门" value="[unitDept]" />
  </el-select>
  <el-select
    v-else-if="colType == ControlType.hidden.value"
    v-model="vals"
    placeholder="默认值"
    :filterable="true"
    :allow-create="true"
    :clearable="true"
    @change="change"
  >
    <el-option label="填写人员工ID" value="[empId]" />
    <el-option label="填写人所在部门ID" value="[deptId]" />
    <el-option label="填写人所在单位ID" value="[unitId]" />
    <el-option label="填写人所在公司ID" value="[companyId]" />
  </el-select>
  <el-select
    v-else-if="
      colType == ControlType.radio.value || colType == ControlType.checkbox.value
    "
    v-model="vals"
    placeholder="默认值"
    :multiple="colType == ControlType.checkbox.value"
    :clearable="true"
    @change="change"
  >
    <el-option v-for="(item, i) in controlSet['items']" :key="i" :label="item.text" :value="item.value" />
  </el-select>
  <el-select
    v-else-if="
      colType == ControlType.emp.value
    "
    v-model="vals"
    :clearable="true"
    placeholder="默认值"
    @change="change"
  >
    <el-option label="填写人" value="[empId]" />
  </el-select>
  <component
    :is="controlKey"
    v-else-if="colType == ControlType.customize.value"
    ref="auditForm"
    v-model="vals"
    v-bind="controlSet"
    @change="change"
  />
  <el-input
    v-else
    v-model="vals"
    :disabled="colType == ControlType.upload.value"
    :maxlength="50"
    placeholder="默认值"
    @change="change"
  />
</template>

<script>
import Vue from 'vue'
import { ControlType } from '@/customForm/config/formConfig'
import companySelect from '@/components/company/companySelect.vue'
import deptSelect from '@/components/unit/deptSelect.vue'
export default {
  components: {
    companySelect,
    deptSelect
  },
  props: {
    control: {
      type: Object,
      default: null
    },
    controlSet: {
      type: Object,
      default: null
    },
    value: {
      type: String,
      default: null
    },
    isLoad: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      ControlType,
      companyId: null,
      deptComId: null,
      controlKey: null,
      deptId: null,
      time: null,
      chioseType: null,
      colType: 0,
      vals: null
    }
  },
  watch: {
    isLoad: {
      handler(val) {
        if (val) {
          this.reset()
        }
      },
      immediate: true
    }
  },
  mounted() {},
  methods: {
    timeChange(val) {
      if (this.chioseType === '[curTime]' || this.chioseType == null) {
        this.$emit('input', this.chioseType)
      }
    },
    change(val) {
      let data = val
      if (this.colType === ControlType.checkbox.value) {
        data = val.join('-')
      }
      this.vals = data
      this.$emit('input', data)
    },
    initControl() {
      const that = this
      Vue.component(this.controlKey, function(resolve, reject) {
        require(['@/' + that.control.EditControl + '.vue'], resolve)
      })
    },
    reset() {
      this.companyId = null
      this.deptComId = null
      this.deptId = null
      this.colType = 0
      this.chioseType = null
      this.time = null
      this.vals = null
      this.controlKey = 'cont_' + this.control.Id
      if (this.control.ControlType === ControlType.dept.value) {
        if (this.value === '[unitId]' || this.value === '[deptId]') {
          this.chioseType = this.value
          this.companyId = null
          this.deptId = null
        } else if (this.value == null || this.value === '') {
          return
        } else {
          this.chioseType = 'customize'
          const t = this.value.split('-')
          this.companyId = t[0]
          this.deptId = t[1]
        }
      } else if (this.control.ControlType === ControlType.company.value) {
        if (this.value === '[comId]') {
          this.chioseType = this.value
        } else {
          this.chioseType =
            this.value == null || this.value === '' ? null : 'customize'
          this.companyId = this.value
        }
      } else if (
        this.control.ControlType === ControlType.dateTime.value ||
        this.control.ControlType === ControlType.time.value ||
        this.control.ControlType === ControlType.date.value
      ) {
        if (this.value === '[curTime]') {
          this.chioseType = '[curTime]'
          this.time = null
        } else if (this.value != null && this.value !== '') {
          this.chioseType = 'customize'
          this.time = this.value
        }
      } else if (this.control.ControlType === ControlType.checkbox.value && this.value != null && this.value !== '') {
        this.vals = this.value.split('-')
      } else {
        this.vals = this.value
      }
      if (this.control.ControlType === ControlType.customize.value) {
        this.initControl()
      }
      this.colType = this.control.ControlType
    },
    deptChange(e) {
      if (this.chioseType === '[unitId]') {
        this.$emit('input', '[unitId]')
      } else if (this.chioseType === '[deptId]') {
        this.$emit('input', '[deptId]')
      } else if (this.chioseType == null || this.chioseType === '') {
        this.$emit('input', null)
      } else if (this.deptId != null && this.deptId !== '') {
        const val = this.companyId + '-' + this.deptId
        this.$emit('input', val)
      } else {
        this.$emit('input', null)
      }
    },
    comChange(e) {
      if (e == null || e === '') {
        this.companyId = null
        this.$emit('input', null)
      } else if (e === '[comId]') {
        this.companyId = null
        this.$emit('input', e)
      } else if (e === 'customize') {
        return
      } else {
        this.$emit('input', this.companyId)
      }
    }
  }
}
</script>
